<template>
	<view class="page">

		<image class="main_top" src="/static/main_bottom.png" mode="widthFix">
		</image>
		<image class="logo" src="/static/main.png" mode="widthFix"></image>
		<!-- <image class="bottom" src="/static/main_bottom.png" mode="widthFix"></image> -->
		<view class="page2">
			<view class="top">
				<span>陌生人，你好...</span>
				<span>今天过的愉快么？</span>
				<span>是否需要一些鼓励和治愈～</span>

			</view>

			<view class="content">
				<image class="l" src="/static/top_r.png" mode="widthFix"></image>
				<image class="r" src="/static/top_r.png" mode="widthFix"></image>
				<image class="b_l" src="/static/top_r.png" mode="widthFix"></image>
				<image class="b_r" src="/static/top_r.png" mode="widthFix"></image>


				<span class="message" v-if="message && message.length > 0">{{message}}</span>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				message: "",
			}
		},
		onLoad() {
			this.initData()
		},
		mounted() {

		},
		methods: {
			initData() {
				var t = new Date().format("yyyy-MM-dd")
				var count = uni.getStorageSync("count_" + t);
				if (!count) {
					count = 2;
				}
				if (count <= 0) {
					uni.showModal({
						title: '次数已经用尽，请明天再来！',
						showCancel: false,
						confirmText: "知道了"

					});
					return;
				}
				uniCloud.callFunction({
					name: 'ai',
					data: {
						content: '我希望你只用中文回答。 请给我1条简短的励志名言，将这些名言与隐喻、直截了当的建议、要避免的错误想法和鼓励混合在一起，每句名言都用不同的词开头。 不要自我参考。 不要以“you”或“like”开头……避免重复，保持引语新鲜和活跃。 你的回答应该是中文的并且不超过20个字符'
					}
				}).then(res => {
					console.log(JSON.stringify(res));
					this.message = res.result.reply;
					var c = parseInt(count) - 1;
					uni.setStorageSync("count_" + t, c + "")
				});
			}
		}
	}
	Date.prototype.format = function(fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
				"00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		background-color: #202730;

		position: relative;

	}

	.main_top {
		width: 100%;
		animation: rotate 2s linear infinite; /* 定义动画 */
	}

	.logo {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: flicker 2s infinite;
	}

	@keyframes flicker {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.7;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
			/* 从0度开始旋转 */
		}
	
		to {
			transform: rotate(360deg);
			/* 旋转一周，即360度 */
		}
	}
	
	.bottom {
		width: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		// animation: flicker 2s infinite;
		animation: rotate 2s linear infinite; /* 定义动画 */
		opacity: 0.5;
	}
	

	.page2 {
		width: 100vw;
		height: 100vh;
		background-color: #202730;
		opacity: 0.7;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}



	.top {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #e8c576;
		font-size: 12px;
		margin-top: 50px;
		margin-bottom: 20px;

		span {
			margin-top: 10px;
			animation: flicker 2s infinite;
		}
	}

	.content {
		background-color: #000000;
		width: 90%;
		height: 70%;
		position: relative;

		.myCanvas {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 9999;
		}

		.r {
			width: 40%;
			position: absolute;
			right: 0;
			top: 0;
		}

		.l {
			width: 40%;
			position: absolute;
			left: 0;
			top: 0;
			transform: scaleX(-1);
		}

		.b_r {
			width: 40%;
			position: absolute;
			right: 0;
			bottom: 0;
			transform: scaleY(-1);
		}

		.b_l {
			width: 40%;
			position: absolute;
			left: 0;
			bottom: 0;
			transform: scale(-1, -1);

		}

		@keyframes typing {
			0% {
				opacity: 0;
			}

			20% {
				opacity: 1;
			}
		}

		.message {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			display: inline-block;
			overflow: hidden;
			// white-space: nowrap;
			text-align: center;
			font-size: 24px;
			color: #e8c576;
			animation: typing 2s steps(20);
		}
	}
</style>